import React,{Component} from "react";
import { View, Text, StyleSheet, Animated, Easing, Dimensions,PanResponder, TouchableOpacity,Modal} from "react-native";
const { width, height } = Dimensions.get('window');
export default class CreateGroupView extends Component{
  constructor(props) {
    super(props);
    this.state={
      top: 0,
      show:false,
      popupHeight:461,
      silderTop:0,
      content:null,
      callback:null,
      offsetYAnimated:new Animated.Value(0)
    }
    this.lastY = height-this.state.popupHeight;
    this.showAnimated=Animated.timing(this.state.offsetYAnimated,{
      easing: Easing.linear,
      toValue:1,
      duration:150,
      useNativeDriver:true
    })
    this.hidenAnimated=Animated.timing(this.state.offsetYAnimated,{
      easing: Easing.linear,
      toValue:0,
      duration:150,
      useNativeDriver:true
    })
  }

  componentDidMount() {
    this._panResponder=PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => {
        return true;
      },
      onMoveShouldSetPanResponder:  (evt, gestureState) => {
        return true;
      },
      onPanResponderGrant: (evt, gestureState) => {

      },
      onPanResponderMove: (evt, gestureState) => {
        console.log(`gestureState.dx : ${gestureState.dx}   gestureState.dy : ${gestureState.dy}`);
        if(gestureState.dy<0){
          return
        }
        else{
          this.setState({silderTop:gestureState.dy})
        }
      },
      onPanResponderRelease: (evt, gestureState) => {
        this.lastY1 = this.state.silderTop;
        if(gestureState.dy>200){
          this.state.offsetYAnimated.setValue(1-gestureState.dy/this.state.popupHeight);
          this.hidenAnimated.start(()=>{
            this.setState({show:false})
          })
        }
        else{
          this.setState({silderTop:0})
          let ratio=gestureState.dy/this.state.popupHeight
          this.state.offsetYAnimated.setValue(1-(ratio>0?ratio:0));
          this.showAnimated.start(()=>{

          })
        }
      },
    })
  }

  show(options,callback){
    let content = options.content || (<Text>无内容</Text>);
    this.setState({
      show:true,
      silderTop:0,
      content:content,
      callback:callback
    })
    this.state.offsetYAnimated.setValue(0);
    this.showAnimated.start()
  }

  hide(){
    this.state.offsetYAnimated.setValue(1);
    this.hidenAnimated.start(()=>{
      this.setState({show:false})
    })
  }

  render() {
    if(this.state.show) {
      const translateY = this.state.offsetYAnimated.interpolate({
        inputRange: [0, 1],
        outputRange: [height, height-this.state.popupHeight]
      })
      return (
        <Modal transparent={true} visible={this.state.show} animationType={'fade'} style={{
          position: "absolute",
          left: 0,
          top: 0,
          width: width,
          height: height
        }}>
          <TouchableOpacity style={styles.PopupPage} activeOpacity={1} onPress={this.hide.bind(this)}>
            <View></View>
          </TouchableOpacity>
          <Animated.View style={[styles.PopupBox,{height:this.state.popupHeight,top:this.state.silderTop, transform:[{translateY:translateY}]}]}>
            <View style={styles.header} {...this._panResponder.panHandlers}>
              <View style={styles.lineBar}></View>
            </View>
            <View style={{flex:1,backgroundColor:'#fff', borderTopLeftRadius:10,borderTopRightRadius:10}}>
              {this.state.content}
            </View>
          </Animated.View>
        </Modal>
      )
    }
    else{
      return <View></View>
    }
  }
}

const styles=StyleSheet.create({
  PopupPage:{
    position: "absolute",
    left: 0,
    top: 0,
    backgroundColor: "rgba(0,0,0,0.4)",
    width: width,
    height: height,
    justifyContent: "center",
    alignItems: "center"
  },
  PopupBox:{
    position: "absolute",
    left: 0,
    width: width,
    backgroundColor: "#FFF",
    borderTopLeftRadius:10,
    borderTopRightRadius:10
  },
  header:{
    height:30,
    flexDirection:'row',
    justifyContent:'center',
    alignItems: 'center'
  },
  lineBar:{
    backgroundColor:'#000000',
    height:4,
    width:40,
    borderRadius:2
  }
})
